import React, { Component } from 'react'
import _ from 'lodash'

const canvas = {
  width: 300,
  height: 300
}

class TankGame extends Component {
  self = {
    uuid: null,
    color: 'red',
    color2: 'yellow',
    x: parseInt(Math.random() * canvas.width, 10),
    y: parseInt(Math.random() * canvas.height, 10),
  }
  player = null
  ctx = null
  bgc = 'black'
  enemys = []

  bindEvt() {
    document.addEventListener('keydown', this.keydown.bind(this), false)
  }
  initPlayer() {
    this.props.initJoin()
  }
  handleSetState(key, value) {
    this[key] = value
  }

  renderSecne() {
    const ctx = this.ctx
    ctx.fillStyle = this.bgc
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    if (this.player) {
      this.drawEntity.bind(this)(this.player)
      this.drawBulletEntity.bind(this)(this.player)
      this.drawEnemys.bind(this)()
    }
    requestAnimationFrame(this.renderSecne.bind(this))
  }

  // TODO 击中效果

  drawBulletEntity(entity) {
    const ctx = this.ctx
    entity.bullets.forEach(bullet => {
      if (bullet.alive) {
        ctx.fillStyle = bullet.color || 'red'
        ctx.fillRect(bullet.x, bullet.y, 2, 2)
      }
    })
  }
  drawEnemys() {
    _.forEach(this.enemys, (enemy, key) => {
      this.drawEntity(enemy)
      this.drawBulletEntity(enemy)
    })
    // this.enemys.forEach(enemy => {
    //   this.drawEntity(enemy)
    // })
  }

  drawEntity(entity) {
    // console.log(entity)
    // const entity = this.player
    if (!entity.alive) return
    const ctx = this.ctx
    if (entity.hp < 0) {
      ctx.drawImage()
    }
    switch (entity.direction) {
      case 0: // up
      case 1: // down
        ctx.fillStyle = entity.color
        ctx.fillRect(entity.x, entity.y - 1, 5, 22)
        ctx.fillRect(entity.x + 15, entity.y - 1, 5, 22)
        ctx.fillRect(entity.x + 6, entity.y, 8, 20)
        ctx.fillStyle = entity.color
        ctx.beginPath()
        ctx.arc(entity.x + 10, entity.y + 10, 3, 0, Math.PI * 2, true)
        ctx.closePath()
        ctx.fill()
        ctx.strokeStyle = entity.color2
        ctx.lineWidth = 2
        ctx.moveTo(entity.x + 10, entity.y + 10)
        if (entity.direction === 0) {
          ctx.lineTo(entity.x + 10, entity.y - 10)
        } else if (entity.direction === 1) {
          ctx.lineTo(entity.x + 10, entity.y + 30)
        }
        ctx.stroke()
        break
      case 2: // left
      case 3: // right
        ctx.fillStyle = entity.color
        ctx.fillRect(entity.x - 1, entity.y, 22, 5)
        ctx.fillRect(entity.x - 1, entity.y + 15, 22, 5)
        ctx.fillRect(entity.x, entity.y + 6, 20, 8)
        ctx.fillStyle = entity.color
        ctx.beginPath()
        ctx.arc(entity.x + 10, entity.y + 10, 3, 0, Math.PI * 2, true)
        ctx.closePath()
        ctx.fill()
        ctx.strokeStyle = entity.color2
        ctx.lineWidth = 2
        ctx.moveTo(entity.x + 10, entity.y + 10)
        if (entity.direction === 2) {
          ctx.lineTo(entity.x - 10, entity.y + 10)
        } else if (entity.direction === 3) {
          ctx.lineTo(entity.x + 30, entity.y + 10)
        }
        ctx.stroke()
        break
      default:
        break
    }
  }

  keydown(evt) {
    const keycode = evt.keyCode
    if (!this.player || !this.player.alive || this.player.hp < 0) return
    switch (keycode) {
      case 87: // up w
        // this.player.up()
        this.props.playerAction(this.self.uuid, 'up')
        break
      case 68: // right d
        // this.player.right()
        this.props.playerAction(this.self.uuid, 'right')
        break
      case 83: // down s
        // this.player.down()
        this.props.playerAction(this.self.uuid, 'down')
        break
      case 65: // left a
        // this.player.left()
        this.props.playerAction(this.self.uuid, 'left')
        break
      case 75: // shoot key 'k'
        // this.player.shoot()
        this.props.playerAction(this.self.uuid, 'shoot')
        break
      default:
        break
    }
  }

  componentDidMount() {
    const canvas = this.refs.canvas
    const ctx = canvas.getContext('2d')
    this.ctx = ctx

    // canvas.addEventListener('click', this.initPlayer)
    ctx.fillStyle = this.bgc

    ctx.fillRect(0, 0, canvas.width, canvas.height)
    // this.ctx.fillStyle = this.bgc
    this.renderSecne()

    this.initPlayer()
  }

  render() {
    // const self = this.self
    return (
      <canvas ref="canvas" width={canvas.width} height={canvas.height}></canvas>
    )
  }
}

export default TankGame